<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->

<div id="test"></div>
<div id="demo"></div>

<!--引入库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>


<script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = (
        <h1 id="test">
            <span>Hello,World</span>
        </h1>
    );
    console.log('虚拟DOM',VDOM);
    const TDOM = document.getElementById('demo');
    console.log('真实DOM',TDOM);

    /**
     * 关于虚拟DOM:
     * 1.本质是Object类型的对象(一般对象)
     * 2.虚拟DOM比较"轻"，虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
     * 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
     */
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>

</body>
</html>
